<!DOCTYPE html>
<html>
<head th:include="vue-element :: header"></head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<div id="vm" v-cloak>
    <el-container>
        <el-main>
            <div style="display: flex;justify-content: space-between;align-items:center;">
                <el-button shiro:hasPermission="hxh:brand:add" type="primary" icon="el-icon-circle-plus-outline" round
                           @click="add">添加品牌
                </el-button>
                <!--查询条件-->
                <div style="display: flex;justify-content:flex-end;align-items:center;margin-right: -530px;width: 30%;">
                    <el-input placeholder="请输入品牌名称" v-model="brandName" clearable
                              style="width: 250px"></el-input>
                </div>
                <div style="display: flex;justify-content: flex-end;align-items:center;">
                    <el-button icon="el-icon-search" @click="getData">查询</el-button>
                    <el-button icon="el-icon-circle-close" style="margin-left: 0;" @click="clearConditions">重置
                    </el-button>
                </div>

            </div>

            <el-table
                    :data="tableData"
                    tooltip-effect="dark"
                    stripe
                    border
                    highlight-current-row
                    style="width: 100%;margin:15px 0;">
                <el-table-column
                    prop="brandId"
                    label="ID">
                </el-table-column>

                <el-table-column
                        prop="brandName"
                        label="品牌名称">
                </el-table-column>

                <el-table-column
                        prop="isHot"
                        label="是否热门">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.isHot+1" :type="tableUxiliaryCategory[row.isHot].type">
                            {{tableUxiliaryCategory[row.isHot].text}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pinyin"
                        label="品牌全拼">
                </el-table-column>
                <el-table-column
                        prop="py"
                        label="拼音简写">
                </el-table-column>
                <el-table-column
                        prop="createName"
                        label="创建人">
                </el-table-column>
                <el-table-column
                        prop="isCustom"
                        label="是否省代自定义">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.isCustom+1" :type="isCustomTable[row.isCustom].type">
                            {{isCustomTable[row.isCustom].text}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-button shiro:hasPermission="hxh:brand:edit" size="mini" type="primary"
                                       icon="el-icon-edit"
                                       @click="edit(scope.$index, scope.row)">
                            </el-button>
                            <el-button shiro:hasPermission="hxh:brand:delete" size="mini" type="danger"
                                       icon="el-icon-delete"
                                       @click="deleteRow(scope.$index, scope.row)">
                            </el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

            </el-table>

            <el-pagination
                    class="el-row--flex is-justify-end"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10,30,50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-main>
    </el-container>

    <!--添加或编辑表单-->
    <el-dialog :title="handleTitle" :visible.sync="addVisible" @open="openForm" @closed="resetForm('ruleForm')">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="品牌名称" prop="brandName">
                <el-input v-model="ruleForm.brandName"></el-input>
            </el-form-item>
            <el-form-item label="是否热门" prop="isHot">
                <el-radio-group v-model="ruleForm.isHot" size="medium">
                    <el-radio border label="0">否</el-radio>
                    <el-radio border label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌全拼" prop="pinyin">
                <el-input v-model="ruleForm.pinyin"></el-input>
            </el-form-item>
            <el-form-item label="拼音简写" prop="py">
                <el-input v-model="ruleForm.py"></el-input>
            </el-form-item>

            <el-form-item label="关联品类" prop="checkList">
                <el-checkbox-group v-model="ruleForm.checkList">
                    <el-checkbox v-for="uxiliary in uxiliarys" :label="uxiliary" :key="uxiliary" border>{{uxiliary}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" :disabled="submitDisabled">提 交
            </el-button>
        </div>
    </el-dialog>

</div>
<div>
<!--七大类接口hxh/prodUxiliary/uxiliaryClassList-->
</div>
<div th:include="vue-element :: footer"></div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script>
    const vm = new Vue({
            el: '#vm',
            data: {
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                addVisible: false,
                handleTitle: '添加品牌',
                submitDisabled: false,
                brandName: '',
                isHot:'',
                uxiliarys:[],
                tableUxiliaryCategory: {
                    0:
                        {
                            type: 'primary', text:
                                '否'
                        }
                    ,
                    1:
                        {
                            type: 'success', text:
                                '热门'
                        }
                },
                isCustomTable: {
                    0:
                        {
                            type: 'primary', text:
                                '否'
                        }
                    ,
                    1:
                        {
                            type: 'success', text:
                                '是'
                        }
                },
                url: {
                    list: '/hxh/brand/list',
                    save:
                        '/hxh/brand/save',
                    update:
                        '/hxh/brand/update',
                    delete:
                        '/hxh/brand/delete',
                    current:
                        ''
                }
                ,
                ruleForm: {
                    brandName: '',
                    pinyin: '',
                    isHot: '0',
                    py: '',
                    cityOptions:'',
                    checkList:[]
                }
                ,
                rules: {
                    brandName: [
                        {required: true, message: '请填写品牌名称', trigger: 'blur'}
                    ],
                    pinyin:
                        [
                            {required: true, message: '请填写品牌全拼', trigger: 'blur'}
                        ],
                    isHot:
                        [
                            {required: true, message: '请选择是否热门', trigger: 'change'}
                        ],
                    checkList:
                        [
                            {required: true, message: '请选择关联品类', trigger: 'blur'}
                        ],
                    py:
                        [
                            {required: true, message: '请填写品牌简拼', trigger: 'blur'}
                        ]

                }
            },
            created() {
                this.getData();
            }
            ,
            computed: {
                offset() {
                    return (this.currentPage - 1) * this.pageSize;
                }
                ,
                partLabel() {
                    return this.ruleForm.isHot === '1' ? '热门' : '非热门';
                },
            }
            ,
            methods: {
                clearConditions() {
                    this.brandName = '';
                    this.isHot = '';
                    this.getData();
                },
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.getData();
                }
                ,
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.getData();
                }
                ,
                getData() {

                    axios.get(this.url.list, {
                        params: {
                            offset: this.offset,
                            limit: this.pageSize,
                            brandName: this.brandName,
                        }
                    }).then(resp => {
                        this.tableData = resp.data.rows;
                        this.total = resp.data.total;
                    }).catch(error => {
                        console.log(error);
                    });
                }
                ,
                add() {
                    this.handleTitle = '添加品牌';
                    this.url.current = this.url.save;
                    this.addVisible = true;
                }
                ,
                edit(index, row) {
                    let copy = {...row};
                    copy.isHot = '' + copy.isHot;
                    copy.checkList = copy.checkList;
                    this.ruleForm = copy;
                    this.handleTitle = '编辑品牌';
                    this.url.current = this.url.update;
                    this.addVisible = true;
                }
                ,
                deleteRow(index, row) {
                    this.$confirm('确定要删除此品牌吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                       /* this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });*/
                        this.post(this.url.delete, {brandId: row.brandId}, data => {

                            this.getData();
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });



                    /*this.post(this.url.delete, {brandId: row.brandId}, data => {
                        this.getData();
                    });*/
                }
                ,
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                    this.ruleForm = {
                        isHot: '0',
                        checkList:[]
                    };
                },
                openForm(){
                    var that = this;
                    //获取七大类
                    $.ajax({
                        type: "GET",
                        url: "/hxh/prodUxiliary/uxiliaryClassList",
                        dataType: "JSON",
                        async: false,
                        success: function (data) {
                            //从服务器获取数据进行绑定
                            var names = new Array();
                            $.each(data, function (i, item) {
                              names.push(item.name);
                            })
                            console.log(names);

                            that.uxiliarys = names;
                        },
                        error: function () {
                            alert("Error");
                        }
                    });

                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.ruleForm.refPrice = '' + this.ruleForm.refPrice;
                            this.ruleForm.costPrice = '' + this.ruleForm.costPrice;
                            this.submitDisabled = true;
                            this.post(this.url.current, this.ruleForm, data => {
                                this.addVisible = false;
                                this.submitDisabled = false;
                                this.getData();
                            }, failed => {
                                this.submitDisabled = false;
                            });
                        } else {
                            return false;
                        }
                    });
                }
                ,
                post(url, data, success, failed) {
                    axios.post(url, data, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        let data = resp.data;
                        if (data) {
                            if (typeof data === 'object') {
                                let code = resp.data.code;
                                if (typeof code === 'undefined') {
                                    if (typeof success === 'function') {
                                        success(data);
                                    }
                                } else {
                                    let msg = data.msg;
                                    if (code === 0) {
                                        if (typeof success === 'function') {
                                            success(data);
                                        }
                                        this.$message({
                                            showClose: true,
                                            message: msg,
                                            type: 'success',
                                            duration: 2000
                                        });
                                    } else {
                                        if (typeof failed === 'function') {
                                            failed(data);
                                        }
                                        this.$message({
                                            showClose: true,
                                            message: msg,
                                            type: 'warning',
                                            duration: 2000
                                        });
                                    }
                                }
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '服务器错误',
                                    type: 'error',
                                    duration: 2000
                                });
                                console.log(data);
                            }
                        } else {
                            console.log(resp);
                        }
                    })
                        .catch(error => console.log(error));
                }
            },
        });

</script>
</body>
</html>